<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom结构操作</title>
</head>

<body>

    <style>
        .container {
            border: 1px solid #ccc;
        }

        .red {
            color: red;
        }
    </style>
    <div id="div1" class="container">
        <p id="p1">一段文字1</p>
        <p>一段文字2</p>
        <p>一段文字3</p>
    </div>
    <div id="div2">
        <img src="../../images/03.jpg" alt="加载失败">
    </div>

</body>
<script>
    const div1 = document.getElementById('div1')
    const div2 = document.getElementById('div2')

    // 新建节点
    const newP = document.createElement('p')
    newP.innerHTML = 'this is newP'
    // 插入节点
    div1.appendChild(newP)

    // 移动节点
    const p1 = document.getElementById('p1')
    div2.appendChild(p1)

    // 获取父元素
    // console.log(p1.parentNode)

    // 获取子元素
    const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {
        if (child.nodeType === 1) {
            return true
        }
        return false

    })
    console.log(div1ChildNodesP)

    // 删除元素
    div1.removeChild(div1ChildNodesP[0])





</script>

</html>